<template>
  <div class="tag">
    <el-tag
      v-for="item in tags"
      :key="item.name"
      :closable="item.name !== 'home'"
      :effect="item.name === $route.name ? 'dark' : 'plain'"
      @click="tagSkip(item)"
      @close="tagdelete(item)"
      size="small"
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "CommonTag",
  computed: {
    ...mapState({
      tags: (state) => state.tab.breadcrumbList,
    }),
  },
  methods: {
    // tag的跳转功能
    tagSkip(item) {
      if (this.$route.name !== item.name)
        this.$router.push({ name: item.name });
    },
    tagdelete(item) {
      let breadcrumbList = this.$store.state.tab.breadcrumbList;
      const index = breadcrumbList.findIndex((val) => val.name === item.name);
      // 删除的tag跟我当前的router不同，router不用变
      if (this.$route.name === breadcrumbList[index].name) {
        // 删除的是当前router 就把栈顶下面的元素push到router
        this.$router.push({name: breadcrumbList[index-1].name})
      }
      breadcrumbList.splice(index, 1);
      

    },
  },
};
</script>

<style lang="less" scoped>
.tag{
  padding: 20px;
  .el-tag{
    margin-right: 15px;
    cursor: pointer;
  }
}
</style>